<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">单击获取服务器数据局</button>
<div id="app">
    <ul v-for="ele in userList">
        <li>序号：{{ ele.id }}</li>
        <li>用户名：{{ele.username }}</li>
        <li>年龄：{{ ele.age }}</li>
        <li>邮箱：{{ ele.email }}</li>
        <li>地址：{{ ele.address }}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="./lib/axios.js"></script>
<script src="lib/vue.js"></script>

<script type="text/javascript">
    $('#btn').click(async function () {
        let url = 'http://localhost:8082/';

        let response = await axios.get(url);

        console.log(response.data);
        // 1. dom 字符串拼接
        // 2. art-template 模板引擎
        // 3. vue
        // bsr 渲染 前端为主导
        new Vue({
            el: '#app',
            data: {
                userList: response.data
            }
        })


    })
</script>

</html>
